<script  setup>
import { ref } from 'vue'
import { friendName,friendHeadShot, type } from '@/stores/friend'
import {
    MoreFilled
} from '@element-plus/icons-vue'
import { friendAndGroupInfoDrawer } from '@/stores/page'
import friendAndGroupInfo from '../toggleInterface/friendAndGroupInfo.vue'


</script>

<template>
    <div id="chatInterface_header" style="margin-left:0.3%; height:8vh">
        <!-- 聊天好友姓名 -->
        <div class="word">
            <label style="width:50%;position:absolute;left:5%;text-align: left"> {{ friendName }} </label>
            <el-icon style="font-size:20px;top:50%;right:3%" @click="friendAndGroupInfoDrawer = true;">
                <MoreFilled />
            </el-icon>
        </div>
        <friendAndGroupInfo></friendAndGroupInfo>
        
</div>

</template>

<style scoped>
.word {
    display: flex;
    text-align: right;
    font-size: 30px;
    align-items: right;
    justify-content: right;
    height: 8vh;
    width:73vw;
    background-color: rgb(245, 241, 241);
}

button {
    margin-top: -6.5%;
    margin-left: 85%;
}
</style>